<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<body>
<div id="app" v-cloak>

    <!--条件查询 -->
    <div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="margin-left: 16px;position: relative;">
                <el-form-item label="经营户名称">
                    <el-input v-model="filters.searchStr" placeholder="经营户名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="经营区域">
                    <el-cascader v-model="regionIds" :options="regionData" :props="regionProps"
                                 @change="handleRegionChange" clearable></el-cascader>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div style="position: relative">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="name" label="名称" min-width="100"></el-table-column>
            <el-table-column prop="person" label="负责人" min-width="100"></el-table-column>
            <el-table-column prop="mobile" label="联系电话" min-width="100"></el-table-column>
            <ex-table-column-enum prop="mainType" enum-cd="001" label="主体类型" width="150"></ex-table-column-enum>
            <el-table-column prop="address" label="地址" min-width="150"></el-table-column>
            <el-table-column prop="socialCode" label="统一社会信用代码" min-width="150"></el-table-column>
            <el-table-column label="营业执照" width="250">
                <template scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="'${imgesBaseUrl}/'+ scope.row.licenseImage"
                              :preview-src-list="previewList(scope.row)"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template scope="scope">
                    <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">审批</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
        <el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
                       :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, prev, pager, next"></el-pagination>
        <el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
                       @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

    <!--编辑界面-->
    <el-dialog title="审核" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen"
               @close="handleClose" width="500px">
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" :inline="false">
            <el-form-item label="审核状态" prop="state">
                <el-radio-group v-model="editForm.state">
                    <el-radio :label="'1'">通过</el-radio>
                    <el-radio :label="'-1'">不通过</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });
    var app = new Vue({
        el: '#app',
        data: {
            isMobile: '${isMobile}',
            tableH: $(window).height() - 155,
            loading: false,
            page: 1,
            size: 10,
            total: 0,
            filters: {
                searchStr: '',
                districtId: '',
                townId: ''
            },
            regionIds: [],
            editFormVisible: false,
            editLoading: false,
            editFormRules: {
                state: [{
                    required: true,
                    message: '不能为空！',
                    validator: function (rule, value, callback) {
                        if (value != '-1' && value != '1') {
                            callback(new Error());
                        } else {
                            callback();
                        }
                    }
                }]
            },
            editForm: {},
            tableData: [],
            regionData: [],
            regionProps: {
                label: 'name',
                value: 'id',
                children: 'children',
                checkStrictly: true
            }
        },
        created: function () {
            this.loadData();
            this.loadRegionData();
        },
        methods: {
            loadData: function () {
                this.loading = true;
                var data = Object.assign({
                    state: 0
                }, this.filters);
                data.page = this.page;
                data.size = this.size;
                $.ajax({
                    url: "${ctx}/backstage/individual/query",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.total = returndata.data.count;
                            app.tableData = returndata.data.list;
                        } else {
                            app.total = 0;
                            app.tableData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            loadRegionData: function () {
                $.ajax({
                    url: "${ctx}/backstage/town/queryRegion",
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.regionData = returndata.data;
                        } else {
                            app.regionData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                    }
                });
            },
            handleSearch: function () {
                this.loadData();
            },
            sizeChange: function (val) {
                this.size = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page = val;
                this.loadData();
            },
            handleClose: function () {
                this.editLoading = false;
            },
            handleOpen: function () {
                if (this.$refs.editForm) {
                    this.$refs.editForm.resetFields();
                }
            },
            handleRegionChange: function (val) {
                switch (val.length) {
                    case 0:
                        this.filters.districtId = '';
                        this.filters.townId = '';
                        break;
                    case 1:
                        this.filters.districtId = val[0];
                        this.filters.townId = '';
                        break;
                    case 2:
                        this.filters.districtId = val[0];
                        this.filters.townId = val[1];
                        break;
                }
            },
            handleEdit: function (index, row) {
                this.editForm = Object.assign({regionIds: []}, row);
                this.editForm.regionIds = [this.editForm.district, this.editForm.town];
                this.editFormVisible = true;
            },
            handleSave: function () {
                this.$refs['editForm'].validate(function (value) {
                    if (value) {
                        app.editForm.district = app.editForm.regionIds[0];
                        app.editForm.town = app.editForm.regionIds[1];
                        app.editLoading = true;
                        $.ajax({
                            url: "${ctx}/backstage/individual/check",
                            data: {id: app.editForm.id, state: app.editForm.state},
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadData();
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.editFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                });
            },
            previewList: function (row) {
                var arr = [];
                arr.push('${imgesBaseUrl}/' + row.licenseImage);
                return arr;
            }
        }
    });
</script>
